<template>
    <div class="page">
        <div class="search">
            <el-row style="padding-bottom:1%">
                <el-col :span="5" :offset="3">
                    <span>乘客姓名</span>
                    <el-input v-model="search.user_name" size="small" style="width: 60%"></el-input>
                </el-col>
                <el-col :span="5">
                    <span>订单编号</span>
                    <el-input v-model="search.order_id" size="small" style="width: 60%"></el-input>
                </el-col>
                <el-col :span="5">
                    <span>航班编号</span>
                    <el-input v-model="search.flight_id" size="small" style="width: 60%"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="searchTicketList(1)">搜 索</el-button>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" plain @click="getTicketList(1)">查看全部</el-button>
                </el-col>
            </el-row>
            <el-row class="btn-group">
                <el-col :span="3" :offset="21">
                    <el-button type="warning" v-print="'#printContent'">打印表格</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data="ticketList" border id="printContent">
            <el-table-column prop="ticket_id" label="机票编号" width="100"></el-table-column>
            <el-table-column prop="order_id" label="订单编号"></el-table-column>
            <el-table-column prop="flight_id" label="航班编号"></el-table-column>
            <el-table-column prop="user_name" label="乘客姓名"></el-table-column>
            <el-table-column prop="user_idCard" label="乘客证件"></el-table-column>
            <el-table-column prop="user_name" label="联系方式"></el-table-column>
            <el-table-column prop="site_type" label="座位类型">
                <template slot-scope="scope">
                    <span>{{type[scope.row.site_type]}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column prop="site_type" label="座位类型">
                <template slot-scope="scope">
                    <el-tag type="danger" v-if="getState(scope.row)">已取消</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination :current-page.sync="currentPage" :page-size="10" :total="count"
                layout="prev, pager, next, jumper" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ticket",
        data(){
            return{
                ticketList:[],
                currentPage:1,
                count:0,
                type:["经济舱","商务舱","头等舱"],
                isSearch:false,
                search:{
                    user_name:'',
                    order_id:'',
                    flight_id:''
                }
            }
        },
        methods:{
            getTicketList(page){
                this.isSearch = false
                this.currentPage = page
                this.clearObj(this.search)
                this.$http.get(`/api/ticket/getTicketList?page=${page}`).then((res)=>{
                console.log(res);
                this.ticketList = res.data.list;
                this.count = res.data.count;
                }).catch((err)=>{
                    this.showMessage("操作失败", 'error');
                })
            },
            searchTicketList(page){
                let search = this.search
                if(this.checkEmpty(search.user_name)&&this.checkEmpty(search.order_id)
                    &&this.checkEmpty(search.flight_id)){
                    this.showMessage('搜索条件不能全为空','error')
                    return;
                }
                this.isSearch = true
                this.currentPage = page
                this.$http.get(`/api/ticket/searchTicketList?page=${page}${this.checkObject(search)}`).then((res)=>{
                console.log(res);
                this.ticketList = res.data.list;
                this.count = res.data.count;
                }).catch((err)=>{
                    this.showMessage("操作失败", 'error');
                })
            },
            handleCurrentChange(current){
                if(this.isSearch){
                    this.searchTicketList(current)
                }else{
                    this.getTicketList(current)
                }
            },
            getState(item){
                return item.is_del == 1
            },
        },
        mounted(){
            this.getTicketList(1)
        }
    }
</script>

<style scoped>

</style>